<template>
  <!--
    stop 阻止事件冒泡
    prevent 取消事件默认行为
    once 只执行一次
	-->
  <form action="https://www.baidu.com/s" method="get">
    <input type="search" name="wd" autocomplete="off" :style="{borderRadius:borderRadius,borderColor:borderColor}">
    <input type="submit" value="千度一下,你就知道" @click.prevent :style="formStyle">
  </form>
  <div id="out_box" @click="out" :class="{out_box:active}">
    <div id="inner_box" @click.stop="inner" :class="[innerBox,fontStyle]">
      <a href="https://space.bilibili.com/480308139" id="lhz" @click.once.prevent="go">李昊哲-小课</a>
      <br>
      <a href="https://space.bilibili.com/480308139" id="lhz" @click.prevent @click.once="go">李昊哲</a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      active: true,
      borderRadius: '30px',
      borderColor: '#FF00FF',
    }
  },
  computed: {
    innerBox() {
      return {
        inner_box: this.active
      }
    },
    fontStyle() {
      return {
        font_style: this.active
      }
    },
    formStyle(){
      return {
        borderRadius: '30px',
        borderColor: '#FF00FF',
      }
    }
  },
  methods: {
    out() {
      window.alert("out_box");
    },
    inner() {
      window.alert("inner_box")
    },
    go() {
      window.alert("once")
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

* {
  margin: 0;
  padding: 0;
}

.out_box {
  width: 450px;
  height: 450px;
  background-color: #929854;
  text-align: center;
  position: absolute;
  top: 100px;
  left: 100px;
}

.inner_box {
  width: 300px;
  height: 300px;
  background-color: #4365c3;
  line-height: 75px;
  position: absolute;
  left: 75px;
  top: 75px;
}

.font_style {
  font-size: 55px;
  color: #ff00ff;
}
</style>
